<script setup lang="ts">
import { Secret, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import { onMounted, ref } from "vue";

const { secretRepo } = useK8SApi();
type Prop = {
  namespace: string;
  placeholder?: string;
};

const props = withDefaults(defineProps<Prop>(), {
  placeholder: "请选择保密字典"
});
const secretName = defineModel<string>();

const emit = defineEmits(["change"]);
const secretList = ref<Secret[]>([]);

const reloadSecretList = () => {
  secretRepo.getSecret({ namespace: props.namespace }).then(({ items }) => {
    if (items) {
      secretList.value = items;
    }
  });
};

const onChange = (name: string) => {
  secretName.value = name;

  const idx = secretList.value.findIndex(
    secret => secret.metadata.name === name
  );
  emit("change", name, idx >= 0 ? secretList.value[idx] : undefined);
};

onMounted(() => {
  reloadSecretList();
});
</script>

<template>
  <el-select v-model="secretName" @change="onChange">
    <el-option
      v-for="secret in secretList"
      :key="secret.metadata.name"
      :label="secret.metadata.name"
      :value="secret.metadata.name"
    />
  </el-select>
</template>
<style lang="scss" scoped></style>
